document.addEventListener('DOMContentLoaded', () => {
    // 导航栏滚动效果
    const header = document.getElementById('mainHeader');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
            header.classList.add('py-2', 'shadow');
            header.classList.remove('py-3');
        } else {
            header.classList.add('py-3');
            header.classList.remove('py-2', 'shadow');
        }
    });

    // 用户菜单
    const userMenuBtn = document.getElementById('userMenuBtn');
    const userMenuDropdown = document.getElementById('userMenuDropdown');

    userMenuBtn.addEventListener('click', () => {
        userMenuDropdown.classList.toggle('hidden');
        if (!userMenuDropdown.classList.contains('hidden')) {
            setTimeout(() => {
                userMenuDropdown.classList.remove('scale-95', 'opacity-0');
                userMenuDropdown.classList.add('scale-100', 'opacity-100');
            }, 10);
        } else {
            userMenuDropdown.classList.add('scale-95', 'opacity-0');
        }
    });

    // 点击页面其他地方关闭用户菜单
    document.addEventListener('click', (e) => {
        if (!userMenuBtn.contains(e.target) && !userMenuDropdown.contains(e.target)) {
            userMenuDropdown.classList.add('hidden', 'scale-95', 'opacity-0');
        }
    });

    // 移动端菜单
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    let mobileMenuOpen = false;

    mobileMenuBtn.addEventListener('click', () => {
        mobileMenuOpen = !mobileMenuOpen;
        if (mobileMenuOpen) {
            mobileMenu.classList.remove('hidden', 'max-h-0');
            mobileMenu.classList.add('max-h-96');
            mobileMenuBtn.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
        } else {
            mobileMenu.classList.add('max-h-0');
            mobileMenu.classList.remove('max-h-96');
            setTimeout(() => {
                mobileMenu.classList.add('hidden');
            }, 300);
            mobileMenuBtn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
        }
    });

    // 编辑资料功能
    const editProfileBtn = document.getElementById('editProfileBtn');
    const profileForm = document.getElementById('profileForm');
    const profileFormActions = document.getElementById('profileFormActions');
    const cancelEditBtn = document.getElementById('cancelEditBtn');

    editProfileBtn.addEventListener('click', () => {
        // 启用表单编辑
        Array.from(profileForm.elements).forEach(element => {
            element.disabled = false;
        });

        // 显示编辑按钮
        profileFormActions.classList.remove('hidden');

        // 平滑滚动到表单顶部
        profileForm.scrollIntoView({ behavior: 'smooth' });
    });

    cancelEditBtn.addEventListener('click', () => {
        // 禁用表单编辑
        Array.from(profileForm.elements).forEach(element => {
            element.disabled = true;
        });

        // 隐藏编辑按钮
        profileFormActions.classList.add('hidden');
    });

    // 编辑联系方式
    const contactForm = document.getElementById('contactForm');
    const contactFormActions = document.getElementById('contactFormActions');
    const cancelContactEditBtn = document.getElementById('cancelContactEditBtn');

    // 查找编辑按钮
    const editContactBtn = document.createElement('button');
    editContactBtn.type = 'button';
    editContactBtn.className = 'btn-primary absolute right-6 top-6';
    editContactBtn.innerHTML = '<i class="fa-solid fa-pencil-alt mr-2"></i>编辑';

    // 将编辑按钮添加到联系方式表单
    const contactFormHeader = contactForm.querySelector('h3');
    contactFormHeader.parentNode.insertBefore(editContactBtn, contactFormHeader.nextSibling);

    editContactBtn.addEventListener('click', () => {
        // 启用表单编辑
        Array.from(contactForm.elements).forEach(element => {
            element.disabled = false;
        });

        // 显示编辑按钮
        contactFormActions.classList.remove('hidden');

        // 平滑滚动到表单顶部
        contactForm.scrollIntoView({ behavior: 'smooth' });
    });

    cancelContactEditBtn.addEventListener('click', () => {
        // 禁用表单编辑
        Array.from(contactForm.elements).forEach(element => {
            element.disabled = true;
        });

        // 隐藏编辑按钮
        contactFormActions.classList.add('hidden');
    });

    // 表单提交处理
    profileForm.addEventListener('submit', (e) => {
        e.preventDefault();
        showSuccessModal('个人信息已成功更新');

        // 更新显示名称
        const displayName = document.getElementById('displayName');
        const realName = document.getElementById('realName');
        displayName.textContent = realName.value;

        // 更新用户简介
        const userBio = document.getElementById('userBio');
        const bio = document.getElementById('bio');
        userBio.textContent = bio.value;

        // 禁用表单编辑
        Array.from(profileForm.elements).forEach(element => {
            element.disabled = true;
        });

        // 隐藏编辑按钮
        profileFormActions.classList.add('hidden');
    });

    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();
        showSuccessModal('联系方式已成功更新');

        // 禁用表单编辑
        Array.from(contactForm.elements).forEach(element => {
            element.disabled = true;
        });

        // 隐藏编辑按钮
        contactFormActions.classList.add('hidden');
    });

    // 头像修改功能
    const changeAvatarBtn = document.getElementById('changeAvatarBtn');
    const avatarModal = document.getElementById('avatarModal');
    const avatarModalContent = document.getElementById('avatarModalContent');
    const closeAvatarModal1 = document.getElementById('closeAvatarModal');
    const cancelAvatarBtn = document.getElementById('cancelAvatarBtn');
    const confirmAvatarBtn = document.getElementById('confirmAvatarBtn');
    const avatarUpload = document.getElementById('avatarUpload');
    const newAvatarPreviewContainer = document.getElementById('newAvatarPreviewContainer');
    const newAvatarPreview = document.getElementById('newAvatarPreview');

    function openAvatarModal() {
        avatarModal.classList.remove('hidden');
        setTimeout(() => {
            avatarModal.classList.remove('opacity-0');
            avatarModalContent.classList.remove('scale-95', 'opacity-0');
            avatarModalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeAvatarModal() {
        avatarModal.classList.add('opacity-0');
        avatarModalContent.classList.add('scale-95', 'opacity-0');
        avatarModalContent.classList.remove('scale-100', 'opacity-100');
        setTimeout(() => {
            avatarModal.classList.add('hidden');
            newAvatarPreviewContainer.classList.add('hidden');
            avatarUpload.value = '';
        }, 300);
    }

    changeAvatarBtn.addEventListener('click', openAvatarModal);
    closeAvatarModal.addEventListener('click', closeAvatarModal);
    cancelAvatarBtn.addEventListener('click', closeAvatarModal);

    avatarUpload.addEventListener('change', (e) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();

            reader.onload = (e) => {
                newAvatarPreview.src = e.target.result;
                newAvatarPreviewContainer.classList.remove('hidden');
            };

            reader.readAsDataURL(e.target.files[0]);
        }
    });

    confirmAvatarBtn.addEventListener('click', () => {
        if (newAvatarPreview.src) {
            // 更新头像
            const currentAvatar = document.querySelector('.w-32.h-32.rounded-full img');
            currentAvatar.src = newAvatarPreview.src;

            // 更新用户菜单中的头像
            const userMenuAvatar = document.querySelector('#userMenuBtn img');
            userMenuAvatar.src = newAvatarPreview.src;

            // 更新模态框中的当前头像预览
            const currentAvatarPreview = document.getElementById('currentAvatarPreview');
            currentAvatarPreview.src = newAvatarPreview.src;

            showSuccessModal('头像已成功更新');
        }
        closeAvatarModal();
    });

    // 封面修改功能
    const changeCoverBtn = document.getElementById('changeCoverBtn');
    const coverModal = document.getElementById('coverModal');
    const coverModalContent = document.getElementById('coverModalContent');
    const closeCoverModal2 = document.getElementById('closeCoverModal');
    const cancelCoverBtn = document.getElementById('cancelCoverBtn');
    const confirmCoverBtn = document.getElementById('confirmCoverBtn');
    const coverUpload = document.getElementById('coverUpload');
    const newCoverPreviewContainer = document.getElementById('newCoverPreviewContainer');
    const newCoverPreview = document.getElementById('newCoverPreview');

    function openCoverModal() {
        coverModal.classList.remove('hidden');
        setTimeout(() => {
            coverModal.classList.remove('opacity-0');
            coverModalContent.classList.remove('scale-95', 'opacity-0');
            coverModalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeCoverModal() {
        coverModal.classList.add('opacity-0');
        coverModalContent.classList.add('scale-95', 'opacity-0');
        coverModalContent.classList.remove('scale-100', 'opacity-100');
        setTimeout(() => {
            coverModal.classList.add('hidden');
            newCoverPreviewContainer.classList.add('hidden');
            coverUpload.value = '';
        }, 300);
    }

    changeCoverBtn.addEventListener('click', openCoverModal);
    closeCoverModal.addEventListener('click', closeCoverModal);
    cancelCoverBtn.addEventListener('click', closeCoverModal);

    coverUpload.addEventListener('change', (e) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();

            reader.onload = (e) => {
                newCoverPreview.src = e.target.result;
                newCoverPreviewContainer.classList.remove('hidden');
            };

            reader.readAsDataURL(e.target.files[0]);
        }
    });

    confirmCoverBtn.addEventListener('click', () => {
        if (newCoverPreview.src) {
            // 更新封面
            const cover = document.querySelector('.bg-gradient-to-r.from-primary.to-secondary');
            cover.style.backgroundImage = `url(${newCoverPreview.src})`;
            cover.style.backgroundSize = 'cover';
            cover.style.backgroundPosition = 'center';
            cover.style.backgroundColor = 'transparent';
            cover.style.backgroundRepeat = 'no-repeat';

            // 更新模态框中的当前封面预览
            const currentCoverPreview = document.getElementById('currentCoverPreview');
            currentCoverPreview.src = newCoverPreview.src;

            showSuccessModal('封面已成功更新');
        }
        closeCoverModal();
    });

    // 成功提示模态框
    const successModal = document.getElementById('successModal');
    const successMessage = document.getElementById('successMessage');
    const closeSuccessModal = document.getElementById('closeSuccessModal');

    function showSuccessModal(message) {
        successMessage.textContent = message;
        successModal.classList.remove('opacity-0', 'pointer-events-none');

        // 3秒后自动关闭
        setTimeout(() => {
            hideSuccessModal();
        }, 3000);
    }

    function hideSuccessModal() {
        successModal.classList.add('opacity-0', 'pointer-events-none');
    }

    closeSuccessModal.addEventListener('click', hideSuccessModal);
});